import React from "react";
import MUtil from "../../util/mm.jsx";
import User from "../../service/user-service.jsx";

let _mm = new MUtil();
let _user = new User();

import "./index.scss";

export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: "",
      redirect: _mm.getUrlParam("redirect") || "/"
    };
  }
  componentWillMount() {
    document.title = '登录 —— MALL ADMIN'
  }
  // 用户名和密码发生改变
  onInputChange(event) {
    let inputName = event.target.name,
      inputValue = event.target.value;
    this.setState({
      [inputName]: inputValue
    });
  }
  // 当用户提交表单
  onSubmit() {
    let loginInfo = {
          username : this.state.username,
          password : this.state.password
        },
        checkResult = _user.checkLoginInfo(loginInfo);
    // 验证通过
    if(checkResult.status){
      _user.login(loginInfo).then((res) => {
        _mm.setStorage('userInfo', res);
        this.props.history.push(this.state.redirect);
      }, (errMsg) => {
          _mm.errorTips(errMsg);
      });
    }
    // 验证不通过
    else{
      _mm.errorTips(checkResult.msg);
    }
  }

  onInputKeyUp(e) {
    if (e.keyCode === 13) {
      this.onSubmit();
    }
  }

  render() {
    return (
      <div className="col-md-4 col-md-offset-4">
        <div className="panel panel-default login-panel">
          <div className="panel-heading">欢迎登录 —— MALL管理系统</div>
          <div className="panel-body">
            <div>
              <div className="form-group">
                <input
                  type="text"
                  name="username"
                  className="form-control"
                  placeholder="请输入用户名"
                  onKeyUp={e => this.onInputKeyUp(e)}
                  onChange={this.onInputChange.bind(this)}
                />
              </div>
              <div className="form-group">
                <input
                  type="password"
                  name="password"
                  className="form-control"
                  placeholder="请输入密码"
                  onKeyUp={e => this.onInputKeyUp(e)}
                  onChange={this.onInputChange.bind(this)}
                />
              </div>
              <button
                className="btn btn-lg btn-primary btn-block"
                onClick={this.onSubmit.bind(this)}
              >
                登录
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
